<template>
    <div class="webCenterEmissions">
        <common-border-large width="100%" height="100%" :text="text">
            <div class="model_one">
                <div class="Green_header_btn">
                    <el-button
                        v-for="(item, index) in status.DateList"
                        :key="index"
                        type="primary"
                        :class="{ active: status.DateIdx === index }"
                        size="small"
                        @click="changeDateBtn(item, index)"
                    >
                        {{ item.name }}
                    </el-button>
                </div>
                <CustomGreenInitiativeSiderRightTadayEmissions
                    chart-view-status="Statistics"
                    style="height: 100%"
                ></CustomGreenInitiativeSiderRightTadayEmissions>
            </div>
        </common-border-large>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, provide } from 'vue';
import type { Ref } from 'vue';
import useContext from '@/utils/useContext';

interface Props {
    text?: string;
}
const props = withDefaults(defineProps<Props>(), {
    text: ''
});
const DateListName = ref<string>('今日');
const status = reactive({
    DateIdx: 0,
    DateList: [{ name: '今日' }, { name: '本周' }, { name: '本月' }],
    datalist: {
        name: '废气排放口',
        quantity: 6,
        complianceRate: 98
    }
});
// 创建共享数据，传递给 <CustomGreenInitiativeSiderRightTadayEmissions>组件
const { useProvide } = useContext<Ref<string>>('changeDate');
useProvide(DateListName);
/** 选择日期 */
const changeDateBtn = (item: object, index: number) => {
    status.DateIdx = index;
    DateListName.value = status.DateList[index].name;
};
</script>

<style scoped lang="scss">
.webCenterEmissions {
    height: 100%;
    .model_one {
        height: calc(100% - 30px);
    }
}
.Green_header_btn {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    ::v-deep(.el-button + .el-button) {
        margin-left: 8px;
    }
    ::v-deep(.el-button) {
        width: 60px;
        font-size: 12px;
        background: rgba($color: #1b93fb, $alpha: 0.2);
        border: none;
    }
    .active {
        width: 60px;
        background: #1b93fb !important;
    }
}
</style>
